<template>
	<view class="container">
		<!-- 功能按钮区域 -->
		<view class="function-bar">
			<view class="function-item" @tap="toggleSearch">
				<text class="function-icon">🔍</text>
				<text class="function-text">搜索</text>
			</view>
			<view class="function-item" @tap="showPendingTasks">
				<text class="function-icon">📝</text>
				<text class="function-text">待填写</text>
				<text class="function-desc">任务单需要现场人员填写受检单位并确认状态</text>
			</view>
		</view>

		<!-- 搜索区域 -->
		<view class="search-section" v-show="showSearch">
			<view class="search-card">
				<view class="search-header">
					<text class="search-title">筛选条件</text>
					<text class="search-close" @tap="toggleSearch">✕</text>
				</view>
				<uni-form ref="searchForm" :model="formData">
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">受检单位</text>
							<input v-model="formData.testedUnit" placeholder="请输入受检单位" class="form-input" />
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">检测性质</text>
							<input v-model="formData.detectionProperties" placeholder="请输入检测性质" class="form-input" />
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">紧急程度</text>
							<picker mode="selector" :range="urgencyOptions" :value="urgencyIndex" @change="onUrgencyChange" class="form-picker">
								<view class="picker-display">{{ formData.urgency || '请选择紧急程度' }}</view>
							</picker>
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">检测类别</text>
							<input v-model="formData.detectionCategory" placeholder="请输入检测类别" class="form-input" />
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="form-label">时间</text>
							<picker mode="date" :value="formData.timePeriod" @change="onTimeChange" class="form-picker">
								<view class="picker-display">{{ formData.timePeriod || '请选择时间' }}</view>
							</picker>
						</view>
					</view>
				</uni-form>
				<view class="search-buttons">
					<button class="btn-secondary" @click="resetForm">重置</button>
					<button class="btn-primary" @click="submitForm">查询</button>
				</view>
			</view>
		</view>

		<!-- 数据列表 -->
		<view class="task-list">
			<view v-for="(item, index) in displayData" :key="index" class="task-card" @click="goToFillPage(item)">
				<view class="card-header">
					<view class="task-info">
						<text class="task-number">{{ item.taskNumber }}</text>
						<text class="creator-name">创建人: {{ item.createBy }}</text>
					</view>
					<view class="status-badge" :class="{
						'status-running': item.killStatus === '0',
						'status-stopped': item.killStatus === '1',
						'status-pending': item.isPending
					}">
						<text class="status-text">
							{{ item.isPending ? '待填写' : (item.killStatus === '1' ? '已终止' : '进行中') }}
						</text>
					</view>
				</view>
				
				<view class="card-footer">
					<button class="btn-primary btn-small" @click.stop="goToFillPage(item)">
						去填写
					</button>
				</view>
			</view>
		</view>
		
		<!-- 填写详情弹窗 -->
		<view class="fill-modal" v-if="showFillModal" @click="closeFillModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">任务详情填写</text>
					<text class="modal-close" @click="closeFillModal">✕</text>
				</view>
				
				<scroll-view class="modal-body" scroll-y>
					<!-- 不可修改的信息 -->
					<view class="info-section">
						<text class="section-title">基本信息（不可修改）</text>
						<view class="readonly-info">
							<view class="info-row">
								<text class="label">任务编号:</text>
								<text class="value">{{ currentTask.taskNumber }}</text>
							</view>
							<view class="info-row">
								<text class="label">发起人:</text>
								<text class="value">{{ currentTask.launchPerson }}</text>
							</view>
							<view class="info-row">
								<text class="label">项目名称:</text>
								<text class="value">{{ currentTask.itemName }}</text>
							</view>
							<view class="info-row">
								<text class="label">委托单位:</text>
								<text class="value">{{ currentTask.entrustUnit }}</text>
							</view>
							<view class="info-row">
								<text class="label">联系人:</text>
								<text class="value">{{ currentTask.contactPerson }}</text>
							</view>
							<view class="info-row">
								<text class="label">联系电话:</text>
								<text class="value">{{ currentTask.contactPhone }}</text>
							</view>
							<view class="info-row">
								<text class="label">检测性质:</text>
								<text class="value">{{ currentTask.checkAttribute }}</text>
							</view>
							<view class="info-row">
								<text class="label">检测方法:</text>
								<text class="value">{{ currentTask.checkMethod }}</text>
							</view>
							<view class="info-row">
								<text class="label">发起时间:</text>
								<text class="value">{{ currentTask.launchTime }}</text>
							</view>
							<view class="info-row">
								<text class="label">报告截止时间:</text>
								<text class="value">{{ currentTask.reportDeadline }}</text>
							</view>
							<view class="info-row">
								<text class="label">要求采样时间:</text>
								<text class="value">{{ currentTask.requiredSamplingTime }}</text>
							</view>
							<view class="info-row">
								<text class="label">紧急程度:</text>
								<text class="value">{{ currentTask.urgentExtent }}</text>
							</view>
							<view class="info-row">
								<text class="label">更新时间:</text>
								<text class="value">{{ currentTask.updateTime }}</text>
							</view>
							<view class="info-row">
								<text class="label">创建人:</text>
								<text class="value">{{ currentTask.createBy }}</text>
							</view>
						</view>
					</view>
					
					<!-- 可修改的受检单位列表 -->
					<view class="info-section">
						<view class="section-header">
							<text class="section-title">受检单位列表</text>
							<button class="btn-add" @click="addInspectedUnit">+ 添加</button>
						</view>
						
						<view class="inspected-units">
							<view v-for="(unit, index) in currentTask.inspectedUnitList" :key="index" class="unit-item">
								<view class="unit-header">
									<text class="unit-title">受检单位 {{ index + 1 }}</text>
									<button class="btn-delete" @click="removeInspectedUnit(index)">删除</button>
								</view>
								<view class="unit-form">
									<view class="form-item">
										<text class="form-label">单位名称</text>
										<input v-model="currentTask.inspectedUnitList[index].name" placeholder="请输入受检单位名称" class="form-input" />
									</view>
									<view class="form-item">
										<text class="form-label">单位地址</text>
										<input v-model="currentTask.inspectedUnitList[index].address" placeholder="请输入受检单位地址" class="form-input" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="modal-footer">
					<button class="btn-cancel" @click="closeFillModal">取消</button>
					<button class="btn-submit" @click="submitTaskInfo">提交</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getPendingList,
		addInspectedUnit
	} from "@/api/mobilebusiness";
	export default {
				data() {
					return {
				urgencyIndex: -1,
			urgencyOptions: ['普通', '加急', '特急'],
			formData: {
				testedUnit: "",
				detectionProperties: "",
				urgency: "",
				detectionCategory: "",
				timePeriod: ""
			},
			tableData: [],
				showSearch: false,
				showPendingOnly: false,
				showFillModal: false,
				currentTask: {},
				// 模拟任务数据
				pendingTasks: [
					{
						taskNumber: 'TASK-2024-001',
						createBy: '张三',
						launchPerson: '李四',
						itemName: '环境检测项目A',
						entrustUnit: '环保局检测中心',
						contactPerson: '王五',
						contactPhone: '13800138001',
						checkAttribute: '委托检测',
						checkMethod: '水质检测',
						launchTime: '2024-01-15 09:00:00',
						reportDeadline: '2024-01-25 18:00:00',
						requiredSamplingTime: '2024-01-16 10:00:00',
						urgentExtent: '普通',
						updateTime: '2024-01-15 09:30:00',
						killStatus: '0',
						isPending: true,
						auditStatus: '0',
						status: '0',
							inspectedUnitList: [{ name: '', address: '' }]
						},
					{
						taskNumber: 'TASK-2024-002',
						createBy: '赵六',
						launchPerson: '孙七',
						itemName: '土壤检测项目B',
						entrustUnit: '市政工程检测站',
						contactPerson: '周八',
						contactPhone: '13800138002',
						checkAttribute: '监督检测',
						checkMethod: '土壤检测',
						launchTime: '2024-01-16 10:00:00',
						reportDeadline: '2024-01-26 18:00:00',
						requiredSamplingTime: '2024-01-17 14:00:00',
						urgentExtent: '加急',
						updateTime: '2024-01-16 10:30:00',
						killStatus: '0',
						isPending: true,
						auditStatus: '0',
						status: '0',
							inspectedUnitList: [{ name: '', address: '' }]
						}
					]

			}
		},
		methods: {

			onTimeChange(e) {
				this.formData.timePeriod = e.detail.value;
			},
			onUrgencyChange(e) {
				this.urgencyIndex = e.detail.value;
				this.formData.urgency = this.urgencyOptions[this.urgencyIndex];
			},
			toggleSearch() {
				this.showSearch = !this.showSearch
			},

			resetForm() {
				this.formData = {
					testedUnit: "",
					detectionProperties: "",
					urgency: "",
					detectionCategory: "",
					timePeriod: ""
				}
			},

			hasPermission(permission) {
				// 实现权限检查逻辑
				return true
			},

			// 显示待填写任务
			showPendingTasks() {
				this.showPendingOnly = !this.showPendingOnly;
				this.getPendingList();

				if (this.showPendingOnly) {
					uni.showToast({
						title: '显示待填写任务',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '显示全部任务',
						icon: 'success'
					});
				}
			},
					// 跳转到填写页面
					goToFillPage(item) {
						this.currentTask = JSON.parse(JSON.stringify(item));
						if (!this.currentTask.inspectedUnitList || !Array.isArray(this.currentTask.inspectedUnitList)) {
							this.$set(this.currentTask, 'inspectedUnitList', [{ name: '', address: '' }]);
						} else {
							this.currentTask.inspectedUnitList = this.currentTask.inspectedUnitList.map(u => {
								return typeof u === 'string'
									? { name: u, address: '' }
									: { name: (u.name || ''), address: (u.address || '') };
							});
						}
						this.showFillModal = true;
					},
			// 关闭填写弹窗
			closeFillModal() {
				this.showFillModal = false;
				this.currentTask = {};
			},
					// 添加受检单位
					addInspectedUnit() {
						// 确保inspectedUnitList存在
						if (!this.currentTask.inspectedUnitList) {
							this.$set(this.currentTask, 'inspectedUnitList', []);
						}
						this.currentTask.inspectedUnitList.push({ name: '', address: '' });
					},
			// 删除受检单位
			removeInspectedUnit(index) {
				// 确保inspectedUnitList存在
				if (!this.currentTask.inspectedUnitList) {
					this.$set(this.currentTask, 'inspectedUnitList', []);
					return;
				}
				if (this.currentTask.inspectedUnitList.length > 1) {
					this.currentTask.inspectedUnitList.splice(index, 1);
				} else {
					uni.showToast({
						title: '至少保留一个受检单位',
						icon: 'none'
					});
				}
			},
					// 提交任务信息
					submitTaskInfo() {
						// 确保inspectedUnitList存在
						if (!this.currentTask.inspectedUnitList || this.currentTask.inspectedUnitList.length === 0) {
							uni.showToast({
								title: '请至少添加一个受检单位',
								icon: 'none'
							});
							return;
						}
						
						// 验证必填字段
						let hasEmpty = false;
						for (let unit of this.currentTask.inspectedUnitList) {
							const name = unit && unit.name ? unit.name.trim() : '';
							const address = unit && unit.address ? unit.address.trim() : '';
							if (!name || !address) {
								hasEmpty = true;
								break;
							}
						}
						
						if (hasEmpty) {
							uni.showToast({
								title: '请填写完整的单位名称和地址',
								icon: 'none'
							});
							return;
						}
				
				// 调用API提交数据
				addInspectedUnit(this.currentTask).then((response) => {
					if (response.msg === "操作成功") {
						this.getPendingList();
						uni.showToast({
							title: "提交成功",
							icon: "success",
						});
						this.closeFillModal();
					}
				}).catch(() => {
					uni.showToast({
						title: "提交失败",
						icon: "error"
					});
				});
			},

			//获取待填写信息的方法
			getPendingList() {
				this.loading = true;
				getPendingList().then((response) => {
						console.log(response);
						this.pendingTasks = response.rows;
						this.loading = false;

					})
					.catch(() => {
						this.loading = false;
						this.$message.error("获取数据失败");
					});
			}
		},
		computed: {
			// 根据显示模式返回对应的数据
			displayData() {
				if (this.showPendingOnly) {
					return this.pendingTasks;
				} else {
					return this.tableData;
				}
			}
		},
		mounted() {
			this.getPendingList()
		}
	}
</script>
<style>
	/* 微信小程序风格样式 */
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
		padding: 0;
	}

	/* 顶部导航栏 */
	.nav-bar {
		background: #ffffff;
		padding: 20rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
		text-align: center;
		display: block;
	}

	/* 功能按钮区域 */
	.function-bar {
		display: flex;
		padding: 24rpx 32rpx;
		gap: 16rpx;
		background: #ffffff;
		margin: 16rpx 24rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.function-item {
		flex: 1;
		padding: 20rpx 16rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 12rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.function-item:nth-child(2) {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}

	.function-item:nth-child(3) {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.function-icon {
		font-size: 32rpx;
		display: block;
		margin-bottom: 8rpx;
	}

	.function-text {
		font-size: 24rpx;
		color: #ffffff;
		font-weight: 500;
		display: block;
	}

	.function-desc {
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 4rpx;
		display: block;
		line-height: 1.3;
	}

	/* 搜索区域 */
	.search-section {
		padding: 0 24rpx;
		margin-bottom: 24rpx;
	}

	.search-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.search-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.search-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.search-close {
		font-size: 32rpx;
		color: #999999;
		padding: 8rpx;
	}

	.form-row {
		margin-bottom: 32rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.form-input {
		padding: 24rpx 32rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #333333;
		background: #fafafa;
		transition: all 0.3s ease;
	}

	.form-input:focus {
		border-color: #667eea;
		background: #ffffff;
	}

	.form-picker {
		padding: 24rpx 32rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		background: #fafafa;
	}

	.picker-display {
		font-size: 28rpx;
		color: #333333;
	}

	.search-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 32rpx;
	}

	/* 按钮样式 */
	.btn-primary {
		flex: 1;
		padding: 24rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.btn-secondary {
		flex: 1;
		padding: 24rpx;
		background: #f5f5f5;
		color: #666666;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.btn-outline {
		padding: 16rpx 24rpx;
		background: transparent;
		border: 2rpx solid #e8e8e8;
		color: #666666;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.btn-small {
		padding: 12rpx 20rpx;
		font-size: 22rpx;
	}

	/* 任务列表 */
	.task-list {
		padding: 0 24rpx;
		margin-bottom: 120rpx;
	}

	.task-card {
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.task-card:active {
		transform: scale(0.98);
	}

	.card-header {
		padding: 32rpx 32rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.task-info {
		flex: 1;
	}

	.task-number {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		display: block;
		margin-bottom: 8rpx;
	}

	.creator-name {
		font-size: 24rpx;
		color: #999999;
		display: block;
	}

	.status-badge {
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		min-width: 120rpx;
		text-align: center;
	}

	.status-running {
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
	}

	.status-stopped {
		background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
	}

	.status-pending {
		background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
	}

	.status-text {
		font-size: 22rpx;
		color: #333333;
		font-weight: 500;
	}

	.card-body {
		padding: 24rpx 32rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		align-items: flex-start;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.info-label {
		font-size: 26rpx;
		color: #666666;
		width: 160rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 26rpx;
		color: #333333;
		flex: 1;
		word-break: break-all;
	}

	.card-footer {
		padding: 24rpx 32rpx 32rpx;
		display: flex;
		gap: 16rpx;
		justify-content: flex-end;
		border-top: 1rpx solid #f0f0f0;
	}



	/* 填写详情弹窗 */
	.fill-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.modal-content {
		background: #ffffff;
		border-radius: 20rpx;
		width: 100%;
		max-width: 680rpx;
		max-height: 80%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.modal-header {
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.modal-close {
		font-size: 32rpx;
		color: #999999;
		padding: 8rpx;
	}

	.modal-body {
		flex: 1;
		padding: 32rpx;
		overflow-y: auto;
	}

	.info-section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 24rpx;
		display: block;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.btn-add {
		padding: 12rpx 24rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		border: none;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.readonly-info {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 24rpx;
	}

	.info-row {
		display: flex;
		margin-bottom: 16rpx;
		align-items: flex-start;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}

	.info-row .label {
		font-size: 26rpx;
		color: #666666;
		width: 200rpx;
		flex-shrink: 0;
	}

	.info-row .value {
		font-size: 26rpx;
		color: #333333;
		flex: 1;
		word-break: break-all;
	}

	.inspected-units {
		gap: 24rpx;
	}

	.unit-item {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	.unit-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.unit-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.btn-delete {
		padding: 8rpx 16rpx;
		background: #ff4757;
		color: #ffffff;
		border: none;
		border-radius: 16rpx;
		font-size: 22rpx;
	}

	.unit-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.unit-form .form-item {
		margin-bottom: 20rpx;
	}

	.unit-form .form-label {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 12rpx;
		display: block;
	}

	.unit-form .form-input {
		padding: 20rpx 24rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333333;
		background: #ffffff;
		width: 100%;
		box-sizing: border-box;
	}

	.form-textarea {
		padding: 20rpx 24rpx;
		border: 2rpx solid #e8e8e8;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333333;
		background: #ffffff;
		width: 100%;
		min-height: 120rpx;
		box-sizing: border-box;
		resize: none;
	}

	.modal-footer {
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 24rpx;
	}

	.btn-cancel {
		flex: 1;
		padding: 24rpx;
		background: #f5f5f5;
		color: #666666;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.btn-submit {
		flex: 1;
		padding: 24rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	/* 响应式适配 */
	@media (max-width: 750rpx) {
		.function-bar {
			flex-direction: column;
		}
		
		.function-item {
			margin-bottom: 16rpx;
		}
		
		.search-buttons {
			flex-direction: column;
		}
		
		.card-footer {
			flex-wrap: wrap;
		}
		
		.fill-modal {
			padding: 20rpx;
		}
		
		.modal-content {
			max-height: 90%;
		}
		
		.unit-form {
			grid-template-columns: 1fr;
		}
		.info-row .label {
			width: 160rpx;
		}
	}
</style>
